Implements browser-based playground for WSL/SimplifiedWSL with iframe embedding and JavaScript API.

Implementation

Core Components

• Monaco Editor integration with custom WSL/SWSL tokenizers and syntax highlighting
• Three deployment targets: standalone (index.html), embeddable (embed.html), demo (demo.html)
• 8 pre-built examples covering workflow patterns (features, solutions, hierarchical execution, error handling)
• Light/dark themes with CSS custom properties
• URL-based code sharing via base64 encoding

Embedding API

• postMessage protocol for parent-child communication
• setCode, getCode, setTheme message types
• Ready event signaling for load detection

Language Definitions

• Custom Monaco tokenizers for both WSL and SimplifiedWSL
• Keyword highlighting: module, workflow, feature, solution, def, const
• Operator support: ->, <-, .
• Variable interpolation: $context, $constants, $state
• Auto-closing brackets, string matching, comment toggling

Security

• SRI integrity hashes on all CDN resources (Monaco Editor)
• CORS and referrer-policy headers configured
• CodeQL scan: 0 vulnerabilities

Usage

<!-- Basic embed -->
<iframe src="https://domain.com/playground/embed.html" width="100%" height="600"></iframe>

<!-- Programmatic control -->
<script>
iframe.contentWindow.postMessage({
    type: 'setCode',
    data: { code: 'module payment\n\nworkflow process\n\nvalidate() -> process() -> .', language: 'swsl' }
}, '*');
</script>

Deployment

GitHub Actions workflow configured for automated Pages deployment. Alternative configs provided for Netlify, Vercel, Docker, nginx/Apache in DEPLOYMENT.md.

Screenshots

Standalone playground

Demo page with live iframe embed

Files

playground/
├── index.html, embed.html, demo.html          # 3 entry points
├── css/playground.css                          # Theming + responsive layout
├── js/
│   ├── playground.js                          # Editor lifecycle, theme, sharing
│   ├── wsl-language.js                        # Monaco tokenizers
│   └── examples.js                            # Example library
├── README.md, DEPLOYMENT.md                    # Documentation
└── package.json                                # Metadata (zero runtime deps)

Dependencies: Monaco Editor 0.45.0 (CDN). Zero npm packages.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.